
<template>
  <div>
    <a-card title="文件管理" :bordered="false" :body-style="{ padding: 0 }">
      <a-menu :default-open-keys="['0']" :selected-keys="[selectedKey]">
        <a-sub-menu key="0">
          <template #icon>
            <icon-apps></icon-apps>
          </template>
          <template #title>文件类型</template>
          <a-menu-item v-for="item in FileTypeList" :key="item.value.toString()" @click="onClickItem(item)">
            <template #icon>
             <BhSvgIcon :size="28" :name="item.icon"></BhSvgIcon>
            </template>
            <span>{{ item.name }}</span>
          </a-menu-item>
        </a-sub-menu>
      </a-menu>
    </a-card>
    <Statistics></Statistics>

  </div>
</template>
<script  lang="ts" setup>
import { FileTypeList, type FileTypeListItem } from '@/types/file'
import Statistics from './statistic.vue'
const selectedKey = ref('0')
const emit = defineEmits<{
  (e: 'searchType', type: string): void
}>()
const onClickItem = (item: FileTypeListItem) => {
  selectedKey.value =item.value.toString()
  emit('searchType',item.value.toString())
}
</script>
<style scoped lang="less">
:deep(.arco-card) {
  .arco-card-header {
    border-bottom-style: dashed;
    margin: 0 16px;
    padding-left: 0;
    padding-right: 0;
    .arco-card-header-title {
      color: var(--color-text-1);
      font-size: 18px;
      font-weight: 500;
      line-height: 1.5;
    }
  }
}
</style>